<template>
    <div class="login">
        <el-carousel class="carousel">
            <el-carousel-item>
                <img src="../assets/images/1.jpg" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/images/2.jpg" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/images/3.jpg" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/images/4.jpg" />
            </el-carousel-item>
        </el-carousel>
        <div class="loginBlock">
            <h3>欢迎使用悦朋软件</h3>
            <br />
            <el-form label-width="80px" :model="user" :label-position="'left'">
                <el-form-item label="用户名">
                    <el-input v-model="user.userid" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="user.pwd" />
                </el-form-item>
                <el-form-item label="验证码">
                    <el-input v-model="user.code" />
                    <img src="http://520mg.com/include/vdimgck.php" />
                    <span>换一换</span>
                </el-form-item>
                <el-form-item>
                    <router-link to="/admin">立即注册</router-link>
                    <router-link to="/admin">忘记密码</router-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
const user = reactive({ userid: '', pwd: '', code: '' })
</script>

<style>
.login .el-carousel__container {
    height: 100vh;
    width: 100%;
}
</style>
<style scoped>
.login {
    position: relative;
}
.carousel {
    width: 100vw;
    height: 100vh;
}
.carousel img {
    width: 100%;
}
.loginBlock {
    position: absolute;
    right: 200px;
    top: 200px;
    width: 380px;
    height: 350px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    padding: 30px;
}
</style>